<script>
export default {
  name: 'AppCalandar',
  data() {
    return {
      dateNow: new Date()
    }
  }
}
</script>

<template>
  <div class="custom-body">
    <el-calendar v-model="dateNow">
      <template
        slot="dateCell"
        slot-scope="{date, data}"
      >
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </el-calendar>
    <el-timeline class="custom-timeline">
      <el-timeline-item timestamp="2018/4/12" placement="top">
        <el-card>
          <h4>更新 Github 模板</h4>
          <p>王小虎 提交于 2018/4/12 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/3" placement="top">
        <el-card>
          <h4>更新 Github 模板</h4>
          <p>王小虎 提交于 2018/4/3 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/2" placement="top">
        <el-card>
          <h4>更新 Github 模板</h4>
          <p>王小虎 提交于 2018/4/2 20:46</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<style scoped>
.custom-body {
  width: 100%;
  height: 100%;
}
::v-deep .el-calendar-table {
  .el-calendar-day {
    padding: 5px;
    height: 60px;
  }
}
.is-selected {
  color: #1989FA;
}
.custom-timeline {
  padding: 0 10px;
  box-sizing: border-box;
}
</style>
